<template>
  <div>
    <el-tabs :tab-position="tabPosition" style="height: 200px;">
      <el-tab-pane label="首页">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="11" :md="12" :lg="13" :xl="14">
            <div class="grid-content">
              <el-container>
                <el-header>
                  <div id="avatar">
                    <el-avatar @error="errorHandler" :size="50" :src="pojo.avatar"></el-avatar>

                    <div style="color:grey;margin-left:10px">ID:&nbsp;{{ pojo.id }}</div>
                  </div>
                  <div style="float:right;margin:5px 10px 5px 10px;">诞生日期：{{ pojo.regisdate }}</div>
                  <el-button type="primary">添加关注</el-button>
                </el-header>
                <el-main>
                  <el-card shadow="hover">
                    <el-form label-position="left" size="mini" class="userForm" :model="pojo">
                      <el-form-item size="mini" label="ID">
                        <span>{{ pojo.id }}</span>
                      </el-form-item>
                      <el-form-item size="mini" label="用户名">
                        <span>{{ pojo.username }}</span>
                      </el-form-item>
                      <el-form-item size="mini" label="手机号">
                        <span>{{ pojo.mobile }}</span>
                      </el-form-item>
                      <el-form-item size="mini" label="性别">
                        <span>{{ pojo.gender === 1 ? "男" : "女" }}</span>
                      </el-form-item>

                      <el-form-item label="生日">
                        <el-date-picker
                          style="float:left"
                          size="mini"
                          v-model="pojo.birthday"
                          readonly
                          type="datetime"
                          placeholder="选择日期时间"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="邮箱">
                        <span>{{ pojo.email }}</span>
                      </el-form-item>
                      <el-form-item label="最后一次登录">
                        <span>{{ pojo.lastlogin }}</span>
                      </el-form-item>
                    </el-form>
                  </el-card>
                </el-main>
              </el-container>
            </div>
          </el-col>
          <el-col :xs="24" :sm="13" :md="12" :lg="11" :xl="10">
            <div class="grid-content">
              <div style="align:center;margin-left:50%">热门文章</div>
              <el-table
                max-height="445"
                ref="singleTable"
                :data="hotArticle"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%"
              >
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column property="title" label="标题" width="120"></el-table-column>
                <el-table-column property="thumbup" label="点赞数" width="120"></el-table-column>
                <el-table-column property="publishtime" label="发表时间"></el-table-column>
              </el-table>
            </div>
          </el-col>
          <!-- <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple-light">3</div>
          </el-col>-->
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="关注列表">
        <div class="right-content">
          <div class="shares">
            <h4>
              <span>我的关注</span>
            </h4>
            <ul class="share-list">
              <li v-for="(item, index) in focusList" :key="index">
                <span class="num">
                  <el-avatar :size="50" :src="item.avatar"></el-avatar>
                </span>

                <span class="title" style="margin:0px 10px 5px 20px">
                  <a href="#">{{ item.username }}</a>
                </span>
                <span class="fr date" style="margin-right:20px">积分：&nbsp;{{ item.score }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="标签列表">标签列表</el-tab-pane>
      <el-tab-pane label="粉丝列表">
        <div class="right-content">
          <div class="shares">
            <h4>
              <span>我的粉丝</span>
            </h4>
            <ul class="share-list">
              <li v-for="(item, index) in fansList" :key="index">
                <span class="num">
                  <el-avatar :size="50" :src="item.avatar"></el-avatar>
                </span>

                <span class="title" style="margin:0px 10px 5px 20px">
                  <a href="#">{{ item.username }}</a>
                </span>
                <span class="fr date" style="margin-right:20px">积分：&nbsp;{{ item.score }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文章列表">
        <div class="job-position">
          <div class="job-type latest-job">
            <div class="head">
              <h4 class="title pull-left">我的文章</h4>

              <div class="clearfix"></div>
            </div>
            <div class="jobs">
              <div class="job-item" v-for="(item, index) in articleList" :key="index">
                <div class="sui-row">
                  <div class="span3 detail">
                    <p>
                      <span class="name">
                        <a
                          href="#"
                          style="text-decoration:underline"
                          @click="handleArticleOpen(item.aid)"
                        >{{ item.title }}</a>
                      </span>
                      <span class="city">
                        <i class="fa fa-map-marker"></i>
                        分类：{{ item.categoryName }}
                      </span>
                    </p>
                    <p class="need">
                      <el-tag :type="item.ispublic === '1' ? '' : 'info'">
                        {{
                        item.ispublic === "1" ? "公开" : "未公开"
                        }}
                      </el-tag>&nbsp;
                      <el-tag :type="item.istop === '1' ? '' : 'info'">
                        {{
                        item.istop === "1" ? "置顶" : "未置顶"
                        }}
                      </el-tag>
                    </p>
                    <div class="tag">
                      <li>Php</li>
                      <li>javascript</li>
                      <li>java</li>
                    </div>
                  </div>

                  <div class="span2 time">发布时间：{{ item.publishtime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 文章详细 -->
    <el-dialog fullscreen title="文章内容" :visible.sync="articleDetailVisible" append-to-body>
      <el-card class="box-card" shadow="hover" style="height:100%;overflow:auto">
        <div class="markdown-body" v-html="compileMarkdown"></div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import marked from "marked";
import hljs from "highlight.js";
import "mavon-editor/dist/css/index.css";
import userApi from "@/api/user.js";
import articleApi from "@/api/article";
import followApi from "@/api/follow";
import "../../assets/css/page-sj-person-myshare.css";
import "../../assets/css/userArticle.css";

export default {
  computed: {
    compileMarkdown: {
      cache: false,
      get() {
        return marked(
          this.pojoArticle.content_md === null
            ? "未发布"
            : this.pojoArticle.content_md,
          {
            breaks: true,
            highlight: function(code) {
              //新加的，用来配置语法高亮
              return hljs.highlightAuto(code).value;
            }
          }
        );
      }
    }
  },
  data() {
    return {
      articleDetailVisible: false, //文章dialog
      user: {}, //当前登录系统的用户
      tabPosition: "top",
      type: "", //userMsm为从管理界面进来
      pojo: {
        id: null,
        mobile: "",
        gender: "",
        username: "",
        password: "",
        email: "",
        regisdate: "",
        lastlogin: "",
        avatar: "",
        isblack: "",
        score: "",
        birthday: ""
      },
      pojoArticle: {
        aid: "",
        title: "",
        categoryName: "",
        content_md: "",
        content_html: "",
        publishtime: "",
        lastupdate: "",
        ispublic: "",
        istop: "",
        thumbup: 0,
        commentnum: 0,
        state: "",
        iscomment: ""
      },
      total: 0,
      currentpage: 1,
      pageSize: 10,
      articleList: [], //文章列表
      hotArticle: [], //热门文章列表
      focusList: [], //关注列表
      fansList: [] //粉丝列表
    };
  },
  mounted() {
    this.type = this.$route.params.type;
    if (this.type === "userMsm") {
      //从用户管理进入
      this.pojo.id = this.$route.params.userid;
      console.log("用户管理", this.pojo.id);
    } else {
      //从个人主页进入
      // console.log("主页");
      this.user = localStorage.getItem("wblog-user-data");
      this.pojo.id = JSON.parse(this.user).id;
    }
    this.fetchData();
    this.fetchHotArticle();
    this.fetchFocusList();
    this.fetchFansList();
    this.fetchArticlList();
  },
  methods: {
    /**
     * 点击热门文章的某行
     */
    handleCurrentChange(currentRow) {
      this.handleArticleOpen(currentRow.aid);
    },
    /**
     * 打开文章详情
     */
    handleArticleOpen(id) {
      articleApi.findArticleById(id).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.pojoArticle = respData.data;
          // this.pojo.content_md = marked(newData[0].content || "", {
          //   sanitize: true
          // });
        } else {
          this.$message({
            type: "warning",
            message: respData.message
          });
        }
      });
      this.articleDetailVisible = true;
    },
    /**
     * 获取用户文章列表
     */
    fetchArticlList() {
      articleApi
        .findAllByUserId(this.currentpage, this.pageSize, this.pojo.id, {
          state: "1"
        })
        .then(resp => {
          const respData = resp.data;
          if (respData.flag) {
            this.articleList = respData.data.rows;
            this.total = respData.data.total;
          }
        });
    },
    /**
     * 获取粉丝列表
     */
    fetchFansList() {
      followApi.findFansById(this.pojo.id).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.fansList = respData.data;
        }
      });
    },
    /**
     * 获取关注列表
     */
    fetchFocusList() {
      followApi.findFocusByid(this.pojo.id).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.focusList = respData.data;
        }
      });
    },
    /**
     * 获取热门文章
     */
    fetchHotArticle() {
      articleApi.findByUserId(this.pojo.id, { state: "1" }).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.hotArticle = respData.data;
        }
      });
    },
    /**
     * 获取用户信息
     */
    fetchData() {
      console.log("fetch", this.pojo.id);
      userApi.getById(this.pojo.id).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.pojo = respData.data;
        } else {
          this.$message({
            type: "warning",
            message: respData.message
          });
        }
      });
    },
    /**
     * 加载失败图片
     */
    errorHandler() {
      this.$message({
        type: "error",
        message: "图片加载失败"
      });
    }
  }
};
</script>
<style scoped>
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-header {
  color: #333;
  text-align: center;
  height: 200px;
}
.el-main {
  color: #333;
  text-align: center;
  height: 500px;
}
#avatar {
  float: left;
  margin: 5px 10px 5px 5px;
}
.userForm span {
  float: left;
}
</style>
